import React from "react"

class AddTodo extends React.Component{
  state={text:''}
  handleChange=(event)=>{
    this.setState({text:event.target.value})
  }
  handleSubmit=(event)=>{
    event.preventDefault()
    this.props.onAdd(this.state.text)
    this.setState({text:''})
  }
  render(){
    // console.log(this);
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.text} onChange={this.handleChange} />
        <button type="submit">添加</button>
      </form>
    )
  }
}

class FilterTodo extends React.Component{
  handleChange=(event)=>this.props.onFilterChange(event.target.value)
  render(){
    const {filter}=this.props
    return (
      <>
        <input type="radio" value="all" name="filter" checked={filter=='all'} onChange={this.handleChange} id="all" /><label htmlFor="all">全部</label>
        <input type="radio" value="completed" name="filter" checked={filter=='completed'} onChange={this.handleChange} id="completed" /><label htmlFor="completed">已完成</label>
        <input type="radio" value="uncompleted" name="filter" checked={filter=='uncompleted'} onChange={this.handleChange} id="uncompleted" /><label htmlFor="uncompleted">未完成</label>
      </>
    )
  }
}

class TodoItem extends React.Component{
  render(){
    const {onToggle,todo:{text,completed},onDelete}=this.props

    return (
    <li>
      <input type="checkbox" checked={completed} onChange={onToggle} />
      <span style={{textDecoration:completed?'line-through':'none'}}>{text}</span>
      <button onClick={onDelete}>x</button>
    </li>
    )
  }
}

class TodoList extends React.Component{
  render(){
    const {todos,onToggle,onDelete}=this.props
    return (
      <ul>
        {
          todos.map((todo,index)=>(
            <TodoItem 
            key={todo.id} 
            todo={todo} 
            onToggle={()=>onToggle(todo.id)} 
            onDelete={()=>onDelete(todo.id)} />
          ))
        }
      </ul>
    )
  }
}


class TodoApp extends React.Component{
  state={todos:[],filter:'all'}//把子组件希望共享的状态定义在父组件里 todos就是
  handleAdd=(text)=>{
    let newTodo={id:Date.now()+''+Math.random(),text,completed:false}
    this.setState(prevState=>({
      todos:[...prevState.todos,newTodo]
    }))
  }
  handleToggle=(id)=>{
    const {todos}=this.state
    const newTodos=todos.map(todo=>{
      if (todo.id===id) {
        todo.completed=!todo.completed;
      } 
      return todo;
    })
    this.setState({
      todos:newTodos
    })
  }
  handleDeleteAll=()=>{
    this.setState({
      todos:[]
    })
  }
  handleDelete=(id)=>{
    const {todos}=this.state;
    const newTodos=todos.filter(todo=>todo.id!==id)
    this.setState({todos:newTodos})
  }

  handleFilterChange=(filter)=>{
    this.setState({filter})
  }
  getFilterdTodos=()=>{
    let {todos,filter}=this.state
    switch(filter){
      case 'completed':
        return todos.filter(todo=>todo.completed)
      case 'uncompleted':
        return todos.filter(todo=>!todo.completed) 
      case 'all':
        return todos;
    }
  }
  render(){
    return (
      <>
        <AddTodo onAdd={this.handleAdd}/>
        <FilterTodo filter={this.state.filter} onFilterChange={this.handleFilterChange}  />
        <TodoList todos={this.getFilterdTodos()} onToggle={this.handleToggle} onDelete={this.handleDelete} />
        <button onClick={this.handleDeleteAll}>全部清空</button>
      </>
    )
  }
}

export default TodoApp

//组件通信
//1.父传子：属性传递
//2.爷爷传孙子 Context
//3.子传父：在父组件里定义一个函数，通过属性传递给子组件，子组件可以通过调用此函数来向父组件传递数据
//4.子传子：让两个儿子把他们要共享的状态定义在父亲那里，然后就可以实现通信了；
//父亲在把自己这个状态和修改状态的方法传递给两个儿子；
//如果有一个儿子通过调用此状态方法修改了父组件里定义的状态，另一个儿子也可以受到此状态的更新



